<template>
    <a-form
        ref="orgRef"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        :model="orgInfo"
    >
        <a-row :gutter="24" style="margin-left: 0px;margin-right: 0px;">
            <a-col :span="12">
                <a-form-item  label="机构名称" name="name" 
                    :rules="[{ required: true, message: '请输入机构名称!' }]">
                    <a-input v-model:value="orgInfo.name"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="机构编码" name="code" 
                    :rules="[{ required: true, message: '请输入机构编码!' }]">
                    <a-input v-model:value="orgInfo.code"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="机构类型" name="orgType" >
                    <a-select v-model:value="orgInfo.orgType" >
                    <a-select-option  key="0" value="0">行政组织</a-select-option>
                    <a-select-option  key="1" value="1">党委组织</a-select-option>
                </a-select>
                    
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="上级机构" name="parentId">
                    <a-tree-select
                        v-model:value="orgInfo.parentId"
                        style="width: 100%"
                        :tree-data="orgTree"
                        allow-clear
                        placeholder="请选择"
                        tree-node-filter-prop="label"
                    />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="机构领导" name="leader">
                    <div style="border: 1px solid #e6e8eb;display: flex;justify-content: space-between;align-items: center;">
                        <a-space>
                            <div style="overflow: auto;" class="tagboxs">
                                <a-tag closable @close="handleClose()" v-for="tag in leaderTags" :key="tag">
                                    {{ tag.NAME }}
                                </a-tag>
                            </div>
                        </a-space>
                        <n-button style="margin-left: auto;" size="small" secondary type="info" @click="openLeaderModal">
                            <template #icon>
                                <n-icon><svg-icon name="touxiang" size="18" /></n-icon>
                            </template>请选择
                        </n-button>
                    </div>
                    <a-input v-model:value="orgInfo.deptLeader" hidden></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="上级机构领导" name="parentLeader">
                    <div style="border: 1px solid #e6e8eb;display: flex;justify-content: space-between;align-items: center;">
                        <a-space>
                            <div style="overflow: auto;" class="tagboxs">
                                <a-tag closable @close="handleParentClose()" v-for="tag in parentLeaderTags" :key="tag">
                                    {{ tag.NAME }}
                                </a-tag>
                            </div>
                        </a-space>
                        <n-button style="margin-left: auto;" size="small" secondary type="info" @click="openParentLeaderModal">
                            <template #icon>
                                <n-icon><svg-icon name="touxiang" size="18" /></n-icon>
                            </template>请选择
                        </n-button>
                    </div>
                    <a-input v-model:value="orgInfo.parentLeader" hidden></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="联系电话" name="phoneNumber">
                    <a-input type="tel" v-model:value="orgInfo.phoneNumber"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="机构图片" name="picture">
                    <UploadImg :limit="1" :fileListJson="fileListJson" :action="action"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="是否启用" name="IS_ENABLED">
                    <a-radio-group v-model:value="orgInfo.IS_ENABLED">
                        <a-radio :value=0>不启用</a-radio>
                        <a-radio :value=1>启用</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="是否与业务相关" name="IS_BUSINESS">
                    <a-radio-group v-model:value="orgInfo.IS_BUSINESS">
                        <a-radio :value=0>否</a-radio>
                        <a-radio :value=1>是</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-col>
            <a-col :span="12" >
                <a-form-item label="机构标签" name="orgTags">
                    <a-input v-model:value="orgInfo.orgTags"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12" >
                <a-form-item  label="排序号" name="orgSort">
                    <a-input-number v-model:value="orgInfo.orgSort"></a-input-number>
                </a-form-item>
            </a-col>
            <a-col :span="24" >
                <a-form-item  :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"  label="备注" name="remark">
                    <a-textarea v-model:value="orgInfo.remark"></a-textarea>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>
<script lang="tsx" setup>
    import { reactive, ref,unref, defineComponent } from 'vue';
    import type { FormInstance } from 'ant-design-vue';
    import { TreeSelect } from 'ant-design-vue';
    import userSingle from '@/components/system/orgUserSingle/userSingle.vue';
    import UploadImg from '@/components/basic/base-upload/uploadImg.vue';
    import { useModal } from '@/hooks/useModal/useModal';
    import { orgBlankData } from '@/views/organization/orgs/orgSchmemas';

    defineComponent({
        userSingle,
        UploadImg
    })
    interface OrgItem{
      defaultData?:any;
    };
    const props = withDefaults(defineProps<OrgItem>(),{
        defaultData:{
            orgTree:[],
            orgItem:{...orgBlankData}, 
        }
    });
    const [ModalRender, modalRef] = useModal()
    //form
    const orgRef = ref<FormInstance>();
    //选择人ref
    const userSingleRef = ref<FormInstance>();
    //机构信息
    const orgInfo = reactive(props.defaultData.orgItem);
    //机构树
    const orgTree=reactive(props.defaultData.orgTree);
    const leaderTags=ref<any>([]);
    const parentLeaderTags=ref<any>([]);
    //机构图片
    const fileListJson=ref<any>([]);
    //上传附件服务接口地址
    const action="";
    const editDrawerBindValue = reactive({
        defaultSelectData: []
    });
    const openLeaderModal = async()=>{
        editDrawerBindValue.defaultSelectData=leaderTags.value;
        ModalRender.show({
            title: '选择机构领导',
            width: '70%',
            // 是否显示右上角确定取消
            defaultExtra: true,
            destroyOnClose: true,
            content: () => {
                return <userSingle  ref={userSingleRef} defaultData={unref(editDrawerBindValue)}></userSingle>;
            },
            // 确定方法执行
            onOk: async () => {
                const res = await userSingleRef.value?.handleSubmit();
                if (!res) return;
                leaderTags.value=[];
                leaderTags.value.push(res);
                orgInfo.deptLeader=res.NO;
            },
        });
    };
    const openParentLeaderModal = async()=>{
        ModalRender.show({
        title: '选择上级机构领导',
        width: '70%',
        // 是否显示右上角确定取消
        defaultExtra: true,
        destroyOnClose: true,
        content: () => {
            return <userSingle  ref={userSingleRef} defaultData={unref(editDrawerBindValue)}></userSingle>;
        },
        // 确定方法执行
        onOk: async () => {
            const res = await userSingleRef.value?.handleSubmit();
            if (!res) return;
            parentLeaderTags.value=[];
            parentLeaderTags.value.push(res);
            orgInfo.parentLeader=res.NO;
        },
        });
    };
    const loadTagData=()=>{
        // if(orgInfo.parentId.length>0){
        //     orgInfo.parentId=orgInfo.parentId.split(',').map(String);
        // }
        if(orgInfo.deptLeader!==''&&orgInfo.deptLeaderName!==''){
            const tag={
            NO:orgInfo.deptLeader,
            NAME:orgInfo.deptLeaderName,
            ORG_TYPE:'user'
            }
            leaderTags.value.push(tag);
        }
        if(orgInfo.parentLeader!==''&&orgInfo.parentLeaderName!==''){
            const tag={
                NO:orgInfo.parentLeader,
                NAME:orgInfo.parentLeaderName,
                ORG_TYPE:'user'
            }
            parentLeaderTags.value.push(tag);
        }
    };
    loadTagData();
    const handleClose=()=>{
        leaderTags.value=[];
        orgInfo.leader="";
    }
    const handleParentClose=()=>{
        parentLeaderTags.value=[];
        orgInfo.parentLeader="";
    }
    const onSubMit = () => {
        return [orgInfo,orgRef]
    };

    defineExpose({
        handleSubmit: onSubMit,
    });
</script>